@import "../../../styles/variables.less";

.logo {
  width     : 120px;
  height    : 31px;
  background: rgba(255, 255, 255, 0.2);
  margin    : 16px 28px 16px 0;
  float     : left;
}

.app-layout {
  width : 100vw;
  height: 100vh;
}

.header-menu {
  line-height: 64px;
}

.outer-content {
  padding: 0 50px;
}

nz-breadcrumb {
  margin: 16px 0;
}

.inner-layout {
  padding   : 24px 0;
  background: #fff;
}

.sider-menu {
  height: calc(100vh - 68px);
}

.inner-content {
  flex    : 1;
  overflow: hidden;
}

:host {
  background-color: #f5f5f5;
  width           : 100%;
}


:host {
  display                : flex;
  text-rendering         : optimizeLegibility;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.menu-sidebar {
  position   : relative;
  z-index    : 10;
  overflow-y : auto;
  overflow-x : hidden;
  padding-top: 30px;
  box-shadow : 0 0 3px 1px rgba(0, 21, 41, 0.08);
}

.header-trigger {
  padding   : 0px 24px 0px 24px;
  font-size : 20px;
  cursor    : pointer;
  transition: all .3s, padding 0s;
}

.trigger:hover {
  color: #1890ff;
}

.sidebar-logo {
  position       : relative;
  height         : 64px;
  padding-left   : 24px;
  overflow       : hidden;
  line-height    : 64px;
  // background  : #001529;
  transition     : all .3s;
}

.sidebar-logo img {
  display       : inline-block;
  height        : 32px;
  width         : 32px;
  vertical-align: middle;
}

.sidebar-logo h1 {
  display       : inline-block;
  margin        : 0 0 0 20px;
  color         : #fff;
  font-weight   : 600;
  font-size     : 14px;
  font-family   : Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  vertical-align: middle;
}

nz-header {
  padding: 0;
  width  : 100%;
  z-index: 11;
}

.app-header {
  position   : relative;
  height     : 64px;
  padding    : 0;
  background : #fff;
  box-shadow : 0 1px 4px rgba(0, 21, 41, .08);
  display    : flex;
  align-items: center;

  .spacer {
    flex: 1;
  }

  .user-info {
    margin-right: 24px;
  }
}

nz-content {
  display       : flex;
  flex-direction: column;
}

.page-header {
  margin-bottom: 20px;
}

.p-r {
  padding-right: 28px;
}

.seat {
  flex: 1
}

.chain-store-name {
  cursor: pointer;
}

.parent-menu-wrapper {
  display    : flex;
  align-items: center;
}

.menu-item {
  display    : flex;
  align-items: center;
  outline    : none;
}

.menu-icon.iconfont {
  font-size: 22px;
}

.menu-name {
  font-size   : 14px;
  padding-left: 12px;
}

.message-panel {
  width: 300px;

  .message-list {
    max-height: 800px;
    overflow  : auto;

    .message-item {
      display    : flex;
      align-items: center;
      cursor     : pointer;
      padding    : 16px;

      &:hover {
        background-color: #1890ff14;
      }

      .message-icon {
        width           : 35px;
        height          : 35px;
        background-color: #FF4C52;
        color           : #fff;
        display         : flex;
        justify-content : center;
        align-items     : center;
        border-radius   : 50%;
        margin-right    : 20px;
      }

      .msg-body {
        flex: 1;

        .main-title {
          // font-size: 16px;
        }

        .sub-title {
          margin-top: 3px;
          font-size : 12px;
        }
      }

    }
  }
}

::ng-deep .ant-popover-inner-content {
  padding: 0px;
}

.divider {
  border-top: 1px solid #ececec;
}